<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <!-- Kukui Kup Billboard for use with the UH Dorm Energy Competition -->
  <!-- Designed by Jarret Mizo, Paul Galiza, Kendyll Doi, Edward Meyer -->
  <!-- Billboard displays content using 4 sections to show pictures    -->
  <!-- and a combination of Google Visualizations (Table/Column Chart/ -->
  <!-- BioHeatMap)                                                     -->
  <!-- Content is controlled via config.txt                            -->
  <!-- Billboard was designed for Firefox (version of development was  -->
  <!-- v3.6.3) and use of a plug-in to enable true full screen         -->
  <!-- capability can be found at:                                     -->
  <!-- https://addons.mozilla.org/en-US/firefox/addon/1568/            -->
  <title>UH Dorm Energy Billboard</title>
  <link rel="stylesheet" type="text/css" href="billboard.css">

  <!-- Import JavaScript libraries to work with Google Visualizations -->
  <script type="text/javascript" src="http://www.google.com/jsapi"></script>
  <!-- Import Prototype library to work with the BioHeatMap -->
  <script type="text/javascript">
    google.load("visualization", "1", {});
    google.load("prototype", "1.6");
  </script>
  <!-- Billboard.js to handle the drawing of visualizations -->
  <script type="text/javascript" src="billboard.js"></script>
  <!-- div-classes.js to handle transitioning between visualizations and pictures -->
  <script type="text/javascript" src="div-classes.js"></script>
  <!-- Load external library to source code for BioHeatMap -->
  <script type="text/javascript" src="http://systemsbiology-visualizations.googlecode.com/svn/trunk/src/main/js/load.js"></script>
  <script type="text/javascript">
    systemsbiology.load("visualization", "1.0", {packages:["bioheatmap"]});
  </script>
</head>
 
<body>
  <table width="950px" id="layout" border="0" align="center">
    <tr>
      <!-- Main Header on the page. -->
      <td colspan="3">
        <div id="title" class="header">UH Dorm Energy Billboard</div>
      </td>
    </tr>
    <tr>
      <!-- Output the current date below the main header -->
      <td colspan="3">
        <div class="time">
          <script type="text/javascript">printDateNow();</script>
        </div>
      </td>
    </tr>
    <tr>
      <!-- Hidden timer used in conjuction with section transitioning -->
      <td colspan="3">
        <div class="time"><p id="timer">Timer goes here.</p></div>
      </td>
    </tr>
    <tr>
      <!-- Section 1: Left most panel -->
      <td width="120px" class="segment" rowspan="2" valign="top">
        <div class="tableTitle" id="Standings">Standings</div>
        <div id="section1"></div>
      </td>
      <!-- Section 2: Center panel -->
      <td width="440px" class="segment" rowspan="2" valign="top">
        <div class="tableTitle" id="Announcements">Ads/Prizes/Tips/Activities</div>
        <div id="section2"></div>
      </td>
      <!-- Section 3: Upper right panel -->
      <td width="440px" valign="top">
      <div class="tableTitle" id="kIndividualStandings">Visualizations</div>
      <div id="section3"></div>
      </td>
    </tr>
    <tr>
      <!-- Section 4: Lower right panel -->
      <td valign="top">
        <div class="tableTitle" id="Tips">Tips</div>
        <center><div id="section4"></div></center>
      </td>
    </tr>
    <tr>
      <!-- Bottom row contains a side-scrolling ticker -->
      <td colspan="3">
        <div id="TICKER" style="display:none; overflow:hidden; background-color:#000000; width:950px;">
          <!-- JS to create ticker contents by reading an XML file -->
          <script type="text/javascript" src="read_ticker_xml.js"></script>
        </div>
        <!-- External js that outputs the ticker -->
        <script type="text/javascript" src="webticker_lib.js" language="javascript"></script>
      </td>
    </tr>
  </table>
  <script type="text/javascript">
    // Define first section (left most panel) of the billboard that contains the
    // Consumption Standings and Kukui Nut Earnings for each floor.
    // Gives the default title of "Standings" to the div tag "section1"
    var section1 = new billboardSegment("Standings", "section1");

    // Second section (middle panel) with default title Announcements to div tag "section2"
    var section2 = new billboardSegment("Announcements", "section2");
    // Third section (upper right panel) 
    var section3 = new billboardSegment("kIndividualStandings", "section3");
    // Fourth section (lower right panel)
    var section4 = new billboardSegment("Tips", "section4");
    
    /* Configuration variables, declared here
       but defined in the config.txt file. */
    // The title of the billboard, defaults to UH Dorm Energy Billboard.
    var title = 'UH Dorm Energy Billboard';
    // Holds URL to a Google Spreadsheet for the Consumption (kWh) for each floor.
    var urlToConsumption;
    // Holds URL to a Google Spreadsheet for the Kukui Nuts earned for each floor.
    var urlToKNuts;
    // Holds how long (in seconds) to display content, in each section, before fading out.
    var displayTime1;
    var displayTime2;
    var displayTime3;
    var displayTime4;
	
    // Debug variable if there are any errors that occur in the config.txt.
    var error = false;
  </script>
  <!-- Import the configuration file with all the declarations -->
  <script type="text/javascript" src="config.js"></script>
  <script type="text/javascript" src="picture-rotation.js"></script>
  <!-- Start the transitions for the billboard -->
  <script type="text/javascript">
    // Override the title.
    document.getElementById('title').innerHTML = title;
    // Billboard has standings stapled into it's functionality.
    section1.addContent('table', urlToConsumption, "Consum. Standings");
    section1.addContent('table', urlToKNuts, "Total K-Nuts");

    // Only start the transitioning if there were no errors loading the config file.
    if (error || !verifyDisplayTimes()) {
      alert("Errors exist in config.txt, please correct then restart billboard.");
    } else {
      // Start transitions from index 0 (first thing added to a section)
      // and display content for their corresponding lengths.
      // E.x. section 1 will display for value of displayTime1 seconds.
      section1.start(0, displayTime1);
      section2.start(0, displayTime2);
      section3.start(0, displayTime3);
      section4.start(0, displayTime4);
    }
	
    
    /*
     * Verifies each of the 4 sections have a valid display time.
     * A valid display time is an integer greater than 0.
     * If any display time is violated, returns false.
     */
    function verifyDisplayTimes() {

      // Boolean variable is set to false if any errors occur.
      var verified = true;
	  

      /* Go through each of the sections and test the number imputted by the user. */
      // First check if the time is a number, then check it is an integer greater than 0.
      if (!(typeof displayTime1 == 'number')) {
        alert("Display Time for section 1 is not a number");
        verified =  false;
      } else {
        if ( !isPosInt(displayTime1) ) { verified = false; }
      }
	  if (!(typeof displayTime2 == "number")) {
        alert("Display Time for section 2 is not a number");
        verified =  false;
      } else {
        if ( !isPosInt(displayTime2) ) { verified = false; }
      }
	  if (typeof(displayTime3) != 'number') {
        alert("Display Time for section 3 is not a number");
        verified =  false;
      } else {
        if ( !isPosInt(displayTime3) ) { verified = false; }
      }
	  if (typeof(displayTime4) != 'number') {
        alert("Display Time for section 4 is not a number");
        verified =  false;
      } else {
        if ( !isPosInt(displayTime4) ) { verified = false; }
      }
	  
      return verified;

    }
	

    /*
     * Checks to see if a number is a postivie integer greater than 0.
     * @param number Is the variable to test.
     */
    function isPosInt(number) {

      // First test if the variable is an integer.
      if ( /^(-?\d+)$/.test(number) ) {
        // Ensure no negative or 0 display times.
        if (number <= 0) {
          alert("Please ensure display times are greater than 0.");
          return false;
        }
      } else {
        alert("Please ensure display times are positive integers greater than 0.");
        return false;
      }
	  
      // Since no errors were thrown, number must be an integer above 0.
      return true;

    }
  </script>
 </body>
</html>